<template>
  <div class="userdata">
    <div class="updata">
      <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
      <van-cell title="头像" is-link>
        <template>
          <van-image round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </template>
      </van-cell>
      <van-cell
        title="昵称"
        @click="show = true"
        :value="userdata.name"
        is-link
      >
      </van-cell>
      <van-cell
        title="性别"
        is-link
        :value="userdata.gender === 1 ? '女' : '男'"
      />
      <van-cell title="生日" is-link :value="userdata.birthday" />
    </div>
    <!-- 图标位置 -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <UserName></UserName>
    </van-popup>
  </div>
</template>

<script>
import { getUserData } from '@/api/user'
import UserName from './UserName'
export default {
  name: 'UserData',
  data() {
    return {
      userdata: {},
      show: false
    }
  },
  components: {
    UserName
  },
  activated() {
    this.getData()
  },
  methods: {
    async getData() {
      try {
        const { data } = await getUserData()
        this.userdata = data
        console.log(this.userdata, 'this.userdata')
      } catch (error) {}
    }
  }
}
</script>

<style lang="less" scoped>
.userdata {
  padding: 25px 0 0;
  background-color: #fff;
  .updata {
    /deep/.van-cell__value {
      display: flex;
      justify-content: end;
      .van-image--round img {
        width: 50px;
        height: 50px;
      }
    }
  }
  /deep/.van-nav-bar {
    .van-nav-bar__title {
      color: #fff;
    }
    .van-nav-bar__content {
      background-color: #3296fa;
      .van-nav-bar__text {
        color: #fff;
      }
      .van-icon {
        color: #fff;
      }
    }
  }
}
</style>
